<template>
  <div :class='s.wrap' ref='wrap' @touchstart='onTouch'>
    <div v-for='item in liveMsgs' :class='s.item'>
      <left  v-if='item.left' :msg='item.msg' :header='item.header'/>
      <right v-else :msg='item.msg' :header='item.header'/>
    </div>
    <div v-if='index < msgs.length' :class='s.loading'>加载中...</div>
    <!-- <div :class='s.tip' v-if='index >= msgs.length'>本节课已完成</div> -->
    <div :class='s.tip' v-if='index >= msgs.length'>本节课已完成<a v-if='!isShare' href='gtjayyz://jumpfunc?funid=11004'>有话说点这里>></a></div>
  </div>
</template>

<script>
  import Left from '@/components/comment/left'
  import Right from '@/components/comment/right'
  import CommonUtil from '@/common/common.util'
  
  export default {
    components: {
      Left,
      Right
    },
    props: {
      msgs: Array
    },
    data () {
      return {
        liveMsgs: [],
        index: 0,
        addMsgTimer: null,
        scrollTimer: null,
        scrollPos: 0,
        continueScroll: true,
        isShare: false
      }
    },
    mounted () {
      if (this.msgs.length === 0) return
      var dataURL = CommonUtil.getUrlParam('url') || this.$route.query.url
      if (dataURL && dataURL !== '') this.isShare = true

      this.liveMsgs.push(this.msgs[this.index])
      this.index++
      this.addMsgs()
    },
    methods: {
      onTouch () {
        this.continueScroll = false
        if (this.scrollTimer != null) {
          clearInterval(this.scrollTimer)
          this.scrollTimer = null
        }
      },
      addMsgs () {
        this.addMsgTimer = setInterval(() => {
          if (this.index >= this.msgs.length) {
            clearInterval(this.addMsgTimer)
            this.addMsgTimer = null
          } else {
            this.liveMsgs.push(this.msgs[this.index])
            this.index ++
            if (this.continueScroll) {
              this.$nextTick(() => {
                this.scroll2Bottom(this.$refs.wrap)
              })
            }
          }
        }, 1500)
      },
      scroll2Bottom (target) {
        if (this.scrollTimer != null) {
          clearInterval(this.scrollTimer)
          this.scrollTimer = null
        }
        var screenH = window.screen.availHeight
        var contentH = this.$refs.wrap.scrollHeight
        console.info('screenH: ' + screenH + '---contentH: ' + contentH)
        this.scrollTimer = setInterval(() => {
          this.$refs.wrap.scrollTop += 1
          if (this.$refs.wrap.scrollTop >= (contentH)) {
            clearInterval(this.scrollTimer)
            this.scrollTimer = null
          }
        }, 20)
      }
    },
    deactivated () {
      if (this.scrollTimer != null) {
        clearInterval(this.scrollTimer)
        this.scrollTimer = null
      }
    },
    beforeDestroy () {
      if (this.addMsgTimer != null) {
        clearInterval(this.addMsgTimer)
        this.addMsgTimer = null
      }
      if (this.scrollTimer != null) {
        clearInterval(this.scrollTimer)
        this.scrollTimer = null
      }
    }
  }
</script>

<style lang='less' module='s'>
.wrap{
  -webkit-overflow-scrolling : touch;  
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow-y: scroll;
  .item{
    margin-bottom: 40px;
  }
  .loading{
    color: #999;
    padding: 10px 0;
  }
  .tip{
    padding: 40px 10px;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    a{
      color: #309fea;
    }
    &:before, &:after{
      margin: auto 20px;
      flex: 0.4;
      border-bottom: dashed 1px #999;
      content: '';
      display: block;
    }
  }
}
</style>
